<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证用户名</title>
    <style>
        .版面 {
            width: 500px;
            margin: 10px auto; /* 版心居中 */
        }

        input {
            width: 200px; /* 文本框宽高 */
            height: 30px;
        }

        span {
            display: inline-block; /* 显示模式: 行内块*/
            width: 250px; /* 宽高 */
            height: 30px;
            vertical-align: middle; /* 垂直居中, 行内元素 */
            line-height: 30px; /* 行高与高相同, 文本垂直居中 */
            padding-left: 15px; /* 左内边距 */
        }

        .错误 {
            color: red; /* 位置颜色 */
            background: url(./素材/错误.png) no-repeat left center;
            /* 插入背景图  不平铺 左对齐 居中*/
        }

        .正确 {
            color: green;
            background: url(./素材/正确.png) no-repeat left center;
        }

        .警告 {
            color: black;
            background: url(./素材/警告.png) no-repeat left center;
        }
    </style>

</head>
<body>
<!--
用户名验证案例
需求：用户名要求用户英文字母,数字,下划线或者短横线组成，并且用户名长度为 6~16位
分析：
①：首先准备好这种正则表达式模式 /^[a-zA-Z0-9-_]{6,16}$/
②：当表单失去焦点就开始验证.
③：如果符合正则规范, 则让后面的span标签添加 '正确' 类.
④：如果不符合正则规范, 则让后面的span标签添加 '错误' 类.
-->

<div class="版面">
    <label>
        <input type="text" placeholder="输入用户名"> <!-- 文本框用来输入 用户名 -->
        <span class="警告">请输入6~16位 用户名</span> <!-- 这里通过添加 CCS类, 显示验证信息 -->
    </label>
</div>


<script>
    // 声明 正则表达式 规则
    const 规则 = /^[a-zA-Z0-9-_]{6,16}$/
    // 获取 DOM元素
    const 文本框 = document.querySelector('input')
    const span标签 = document.querySelector('span')

    // 监控 鼠标焦点事件 (失去焦点)
    文本框.addEventListener('blur', function () {
        // 验证 文本框内容, 是否符合规则, 规则验证会返回 true或false
        if (规则.test(文本框.value)) {
            span标签.innerHTML = '输入正确' // 修改标签里的文本内容
            span标签.className='正确' // 修改标签里的 CSS类
        } else {
            span标签.innerHTML = '输入错误,请输入6~16位的英文数字下划线 用户名'
            span标签.className='错误'
        }
    })

</script>

</body>
</html>